<template>
	<el-drawer v-model="visible" title="档口收货" :close-on-click-modal="false" :size="1400">
		<el-form ref="dataFormRef" :model="dataForm" label-position="top" :rules="dataRules" label-width="20px">
			<el-tabs type="border-card">
				<el-tab-pane label="业务编号">
					<el-row class="form-row">
						<el-col :span="5">
							<el-form-item prop="customId" label="客户">
								<el-select v-model="dataForm.customId" filterable clearable placeholder="客户" @change="updateCsId">
									<el-option v-for="item in customerOptions" :key="item.value" :label="item.customName" :value="item.customId" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="2">
							<el-form-item prop="salesId" label="业务员">
								<el-select v-model="dataForm.salesId" remote filterable disabled>
									<el-option v-for="item in customerOptions" :key="item.value" :label="item.saName" :value="item.saId" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="2">
							<el-form-item prop="waiterId" label="客服">
								<el-select v-model="dataForm.waiterId" remote filterable disabled>
									<el-option v-for="item in customerOptions" :key="item.value" :label="item.csName" :value="item.csId" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="2">
							<el-form-item prop="businessState" label="业务类型">
								<el-select v-model="dataForm.businessState">
									<el-option v-for="item in businessOptions" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item prop="originId" label="始发港">
								<el-select v-model="dataForm.originId">
									<el-option v-for="item in startAddressOptionsFirst" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item prop="destId" label="目的港">
								<el-select v-model="dataForm.destId">
									<el-option v-for="item in destinationOptionsFirst" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row class="form-row">
						<el-col :span="4">
							<el-form-item label="航空公司">
								<el-input v-model="dataForm.airlineCompany" placeholder="请填写航空公司"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="航班号">
								<el-input v-model="dataForm.airlineNo" placeholder="请填写航班号"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="航班日期">
								<el-date-picker v-model="dataForm.airlineDate" type="date" placeholder="请选择航班日期" />
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="交货日期">
								<el-date-picker v-model="dataForm.deliveryDate" type="date" placeholder="请选择交货日期" />
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="入仓日期">
								<el-date-picker v-model="dataForm.hourseDate" type="date" placeholder="请选择入仓日期" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row class="form-row">
						<el-col :span="4">
							<el-form-item label="付款方式">
								<el-select v-model="dataForm.paystate">
									<el-option v-for="item in paysOptions" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="进仓方式">
								<el-select v-model="dataForm.enterHourseState">
									<el-option v-for="item in enterHourseStateOptions" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="进仓仓库">
								<el-select v-model="dataForm.enterHourse">
									<el-option v-for="item in enterHourseOptions" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="配货司机">
								<el-select v-model="dataForm.driver">
									<el-option v-for="item in driverOptions" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row class="form-row">
						<el-col :span="4">
							<el-form-item prop="expressNum" label="件数">
								<el-input v-model="dataForm.expressNum"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="毛重">
								<el-input v-model="dataForm.weight"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="计费重">
								<el-select v-model="dataForm.chargedState" placeholder="计费重类型">
									<el-option v-for="item in chargedOptions" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="计费重">
								<el-input v-model="dataForm.chargeWeighy"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="体积(m³)">
								<el-input v-model="dataForm.volume"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="货名">
								<el-input v-model="dataForm.collectName"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row class="form-row">
						<el-col :span="10">
							<el-form-item>
								<span>订单附件 / 客服附件 / 操作附件 / 海外附件</span>
								<el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :show-file-list="false">
									<el-icon class="avatar-uploader-icon">
										<Plus />
									</el-icon>
								</el-upload>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item>
						<el-checkbox v-model="addReceipt" label="增加收据" size="large" @click="" />
					</el-form-item>
				</el-tab-pane>
				<el-tab-pane v-if="addReceipt" label="设置收据">
					<el-table v-loading="dataLoading" :data="dataForm.receiptTableData" border style="width: 100%">
						<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
						<el-table-column prop="collect_no" label="收据单号" header-align="center" align="center">
							<template #default="scope">
								<el-input v-model="scope.row.collect_no"> </el-input>
							</template>
						</el-table-column>
						<el-table-column prop="collect_state" label="客户" header-align="center" align="center">
							<template #default="scope">
								<el-select v-model="scope.row.collect_state">
									<el-option v-for="item in cargoOptions" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="货物品名" header-align="center" align="center">
							<template #default="scope">
								<el-input v-model="scope.row.collect_name"> </el-input>
							</template>
						</el-table-column>
						<el-table-column prop="dictType" label="件数" header-align="center" align="center">
							<template #default="scope">
								<el-select v-model="scope.row.collect_type">
									<el-option v-for="item in collectTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="实重" header-align="center" align="center">
							<template #default="{ row }">
								<el-input v-model="row.collect_length" @input="collectTJi(row)"> </el-input>
							</template>
						</el-table-column>
						<el-table-column label="美金单价" header-align="center" align="center">
							<template #default="{ row }">
								<el-input v-model="row.collect_kuan" @input="collectTJi(row)"> </el-input>
							</template>
						</el-table-column>
						<el-table-column label="美金其他费用" header-align="center" align="center">
							<template #default="{ row }">
								<el-input v-model="row.collect_height" @input="collectTJi(row)"> </el-input>
							</template>
						</el-table-column>
						<el-table-column label="美金金额" header-align="center" align="center">
							<template #default="scope">
								<el-input v-model="scope.row.ctns"> </el-input>
							</template>
						</el-table-column>

						<el-table-column label="人民币单价" header-align="center" align="center">
							<template #default="{ row }">
								<el-input v-model="row.collect_weight"> </el-input>
							</template>
						</el-table-column>
						<el-table-column label="人民币其他费用" header-align="center" align="center">
							<template #default="{ row }">
								<el-input v-model="row.collect_tiji"> </el-input>
							</template>
						</el-table-column>
						<el-table-column label="人民币金额" header-align="center" align="center">
							<template #default="{ row }">
								<el-input v-model="row.collect_tiji_weight"> </el-input>
							</template>
						</el-table-column>
						<el-table-column prop="dictType" label="操作" header-align="center" align="center">
							<template #default="scope">
								<el-button @click="deleteHandle(scope.$index)">
									<el-icon>
										<Delete />
									</el-icon>
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
			</el-tabs>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="submitHandle(dataFormRef)">确定</el-button>
		</template>
	</el-drawer>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { Lightning, Plus, Delete } from '@element-plus/icons-vue'
import { fetchWarning, myError } from '@/store/modules/common'
import { collectExpressAddApi, getIdApi } from '@/api/freight'
import { ElSelectOption } from '../../../components/type/general'
import { ElMessage } from 'element-plus/es'
import type { FormInstance, FormRules } from 'element-plus'
import { getDataDictionary, useDictTypeAllApi } from '@/api/dict'
const visible = ref(false)
let dataForm = reactive({
	customId: '',
	question: 0,
	collectNo: '',
	ordersNo: '',
	expressNo: '',
	collectState: '',
	originId: '',
	destId: '',
	businessState: '',
	airlineCompany: '',
	collectorphone: '',
	airlineNo: '',
	airlineDate: '',
	deliveryDate: '',
	collector: '',
	collectNum: '',
	hourseDate: '',
	enterHourseState: '',
	enterHourse: '',
	driver: '',
	expressNum: '',
	weight: '',
	chargedState: '',
	chargeWeighy: '',
	volume: '',
	collectName: '',
	custom: '',
	business: '',
	collectTime: '',
	arrivalstate: '',
	address: '',
	paystate: '',
	sendorphone: '',
	salesId: '',
	waiterId: '',
	// 多个小包裹
	receiptTableData: []
})
const dataLoading = ref(false)
const dataFormRef = ref<FormInstance>()
const dataRules: FormRules = reactive({
	customId: [{ required: true, message: '请选择客户', trigger: 'change' }],
	businessState: [{ required: true, message: '选择业务类型', trigger: 'change' }],
	originId: [{ required: true, message: '请选择始发港', trigger: 'blur' }],
	destId: [{ required: true, message: '请选择目的港', trigger: 'blur' }],
	expressNum: [{ required: true, message: '请输入件数', trigger: 'blur' }]
})
const customerOptions = ref<ElSelectOption[]>([])
const businessOptions = ref<ElSelectOption[]>([])
const startAddressOptionsFirst = ref<ElSelectOption[]>([])
const destinationOptionsFirst = ref<ElSelectOption[]>([])
const paysOptions = ref<ElSelectOption[]>([])
const enterHourseStateOptions = ref<ElSelectOption[]>([])
const enterHourseOptions = ref<ElSelectOption[]>([])
const driverOptions = ref<ElSelectOption[]>([])
const chargedOptions = ref<ElSelectOption[]>([])
const addReceipt = ref(false)

const init = () => {
	visible.value = true
}
const addHandle = () => {
	dataForm.dataList.push({ name: '----' })
}
const deleteHandle = (index?: number) => {
	dataForm.dataList.splice(index, 1)
}
// 获取操作客户等
const getId = async () => {
	try {
		const res = await getIdApi()

		if (fetchWarning(res)) {
			return
		}
		let data = res.data || []
		console.log('客户', data)
		customerOptions.value = data.list
	} catch (e) {
		myError(e)
	}
}
//选择客户自动选择客服
const updateCsId = () => {
	const selectedCustomer = customerOptions.value.find(opt => opt.customId === dataForm.customId)

	if (selectedCustomer) {
		dataForm.waiterId = selectedCustomer.csId
		dataForm.salesId = selectedCustomer.saId
	}
}
const getDictionaryClick = async () => {
	try {
		const res = await getDataDictionary(dataForm)
		if (fetchWarning(res)) {
			return
		}
		let data = res.data || []
		console.log('字典数据', data)
		data.forEach(item => {
			switch (item.dictType) {
				case 'businessOptions':
					businessOptions.value.push({ label: item.dictLabel, value: item.id })
					break
				case 'startAddressOptionsFirst':
					startAddressOptionsFirst.value.push({ label: item.dictLabel, value: item.id })
					break
				case 'destinationOptionsFirst':
					destinationOptionsFirst.value.push({ label: item.dictLabel, value: item.id })
					break
				case 'payment':
					paysOptions.value.push({ label: item.dictLabel, value: item.id })
					break
				case 'chargedOptions':
					chargedOptions.value.push({ label: item.dictLabel, value: item.id })
					break
				case 'enterHourseStateOptions':
					enterHourseStateOptions.value.push({ label: item.dictLabel, value: item.id })
					break
				case 'enterHourseOptions':
					enterHourseOptions.value.push({ label: item.dictLabel, value: item.id })
					break
				case 'driverOptions':
					driverOptions.value.push({ label: item.dictLabel, value: item.id })
					break
				default:
					console.warn('未知字典类型:', item.dictType)
			}
		})
	} catch (error) {
		console.error('获取字典失败', error)
	}
}
// const getDictTypeAll = async () => {
// 	try {
// 		const res = await useDictTypeAllApi()
// 		console.log(res, 'zidian')
// 	} catch (error) {
// 		console.log(error)
// 	}
// }
const submitHandle = async (formEl: FormInstance | undefined) => {
	if (!formEl) {
		return
	}
	await formEl.validate((valid, fields) => {
		if (valid) {
			console.log('submit!')
		} else {
			console.error('error submit!', fields)
		}
	})
}
// 增加收据
const addReceiptClick = () => {
	addReceipt.value = true
}
onMounted(() => {
	getId()
	getDictionaryClick()
	// getDictTypeAll()
})

defineExpose({
	init
})
</script>
<style scoped>
.form-row {
	margin-bottom: 20px;
	/* Adjust the margin as needed */
}

.flex-container {
	display: flex;
	align-items: center;
	/* 垂直居中 */
	margin-left: 5px;
}

.input-width {
	width: 200px;
}

.label-style {
	width: 160px;
}

.input-nub {
	width: 20%;
}

.avatar-uploader .avatar {
	width: 178px;
	height: 178px;
	display: block;
}

.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}

.line {
	float: right;
	width: 100%;
	height: 1px;
	margin-top: 50px;
	background: #d4c4c4;
	position: relative;
	text-align: center;
}

.margin-style {
	margin-left: 50px;
}

.margin1-style {
	margin-bottom: 20px;
	font-size: var(--el-font-size-base);
	color: #303133;
}

.margin2-style {
	margin-top: 50px;
	margin-left: 250px;
}
</style>
